<template>
	<div class="home">
		<div class="upper-part">
			<Statistics :openAnimation="animationStatus" />
		</div>
		<div class="next-part">
			<div class="left-box">
				<ScrolledList :openAnimation="animationStatus" />
			</div>
			<div class="right-box">
				<TestProduce :openAnimation="animationStatus" />
				<QuickAccess :openAnimation="animationStatus" @changeAnimationStatus="changeAnimationStatus" />
			</div>
		</div>
	</div>
</template>
<script>
import Statistics from "./subassembly/statistics.vue"
import ScrolledList from "./subassembly/scrollList.vue"
import TestProduce from "./subassembly/testProduce.vue"
import QuickAccess from "./subassembly/quickAccess.vue"

export default {
	name: "Index",
	components: { Statistics, ScrolledList, TestProduce, QuickAccess },
	data() {
		return {
			animationStatus: false
		}
	},
	watch: {
		animationStatus: {
			handler(newVal, oldVal) {
				if (newVal) {
					localStorage.setItem("animationStatus", 1)
				} else {
					localStorage.setItem("animationStatus", 0)
				}
			},
			deep: true
		}
	},
	created() {
		if (localStorage.getItem("animationStatus") != null) {
			this.animationStatus = Number(localStorage.getItem("animationStatus")) === 1
		}
	},
	methods: {
		handleClick() {
			let routerUrl = this.$router.resolve({
				path: "/scrollLargeScreen"
			})
			window.open(routerUrl.href, "_blank")
		},
		getCurrentData(str) {
			const currentYear = new Date().getFullYear()
			if (str === "year") {
				console.log(currentYear)
				return currentYear
			}
			if (str === "dateRange") {
				const firstDayOfYear = new Date(currentYear, 0, 1)
				const lastDayOfYear = new Date(currentYear, 11, 31)
				console.log([firstDayOfYear, lastDayOfYear])
				return [firstDayOfYear, lastDayOfYear]
			}
		},
		changeAnimationStatus(status) {
			this.animationStatus = status
		}
	}
}
</script>
<style scoped lang="scss">
.home {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	user-select: none;
	background-color: #f0f0f0;
	padding: 10px;
	font-family: Microsoft YaHei;
	.upper-part {
		height: 11.25rem;
		min-height: 180px;
		background-color: rgba(255, 255, 255, 0.8);
		margin-bottom: 1rem;
	}
	.next-part {
		flex: 1;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left-box {
			width: 60%;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.8);
			margin-right: 1rem;
		}
		.right-box {
			width: calc(40% - 1rem);
			height: 100%;
		}
	}
}
</style>
